<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色列表</title>
    <%@ include file="/WEB-INF/pages/commons/head-meta.jsp" %>
    <%@ include file="/WEB-INF/pages/commons/js-meta.jsp" %>
    <style>
        .form-group {
            float: left;
            margin-right: 10px;
        }

    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="panel-body  bg-from pad0B">
                        <form id="submitForm">

                            <div class="form-group">
                                <div class="input-group">
                            	<span class="input-group-btn">
                            	</span><input type="text" id="name" name="name" placeholder="角色名称"
                                              class="form-control trimInput">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="search-text-margin-left form-group">
                                    <div class="input-group">
                                        <select class="form-control m-b" name="weight" id="weight">
                                            <option value="">角色权重</option>
                                            <c:forEach items="${weightList}" var="weight">
                                                <option value="${weight}">${weight}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <a id="search" class="btn btn-primary btn-outline ">搜索</a>
                                <a id="reset" class="btn  btn-primary btn-outline ">重置</a>
                                <a id="add" class="btn  btn-primary btn-outline ">新增</a>
                            </div>
                        </form>
                    </div>

                    <div class="table-div relative">
                        <table class="table table-striped table-bordered table-hover datatable">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>描述</th>
                                <th>权重</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 角色编辑  -->
<div id="modifyModel" class="ibox-content" style="display: none;">
    <form class="form-horizontal" style="margin-top: 20px">
        <div class="modal-body">
            <input type="hidden" name="id" id="id"/>
            <div class="form-group">
                <div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-primary" type="button">
								<font>名称：</font>
							</button>
						</span> <input type="text" placeholder="请输入名称" name="name" class="form-control trimInput"/>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-primary" type="button">
								<font>描述：</font>
							</button>
						</span>
                    <input type="text"  class="form-control trimInput" name="description" placeholder="请输入描述内容"></input>
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-primary" type="button">
							<font>权重：</font>
						</button>
					</span>
                    <select id="weightId" name="weightId" class="form-control">
                        <option value="">请选择权重</option>
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-primary" type="button">
								<font>备注：</font>
							</button>
						</span>
                    <textarea class="form-control" name="remark" rows="5" cols="5"
                              placeholder="请输入备注内容"></textarea>
                </div>
            </div>

            <%--            <div class="form-group">--%>
            <%--                <div class="input-group">--%>
            <%--					<span class="input-group-btn">--%>
            <%--						<button class="btn btn-primary" type="button">--%>
            <%--							<font>发送用户：</font>--%>
            <%--						</button>--%>
            <%--					</span>--%>
            <%--                    <div class="radio i-checks">--%>
            <%--                        <label><input type="radio" class="mode-check" checked value="10" name="sendType1"> <i></i> 全部客户</label>--%>
            <%--                        <label><input type="radio" class="mode-check" value="20" name="sendType2"> <i></i> 指定客户</label>--%>
            <%--                    </div>--%>
            <%--                </div>--%>
            <%--            </div>--%>
        </div>
    </form>
</div>
<script src="${ctx}/js/manager/role/list.js"></script>
<script>
    var datatable;
    var condJsonData = {
        name: '',
        weight: '',
    };
    $(function () {
        loadData(condJsonData);
    })
    //搜索facco
    $('#search').click(function () {
        condJsonData['name'] = $("#name").val();
        condJsonData['weight'] = $("#weight").val();
        loadData(condJsonData);
    });
    //重置
    $("#reset").click(function () {
        condJsonData['name'] = "";
        condJsonData['weight'] = "";
        $("#name").val("");
        $("#weight").val("");
        loadData(condJsonData);
    });

    function loadData(condJsonData) {
        if (datatable) {
            datatable.destroy();
        }
        var objIndex = layer.load(0, {time: 5 * 1000});
        datatable = $('.datatable').DataTable({
            "bLengthChange": false,//去掉每页多少条框体
            "bFilter": false,
            "serverSide": true,
            "processing": false,
            "lengthMenu": [30, 50, 100, 300],
            "pagingType": "full_numbers",
            "fnDrawCallback": function () {
                layer.close(objIndex);
                $("#DataTables_Table_0_info").append(" 跳转到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:27px;'> 页<input type='button' class='btn btn-info' id='jump' value='go'> ");
                var oTable = $(".datatable").dataTable();
                var redirectPage = 0;
                $('#jump').bind("click", function () {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        redirectPage = $("#changePage").val() - 1;
                    }
                    oTable.fnPageChange(redirectPage);
                });
            },
            "ajax": {
                "async": true,
                "url": ctx + "/admin/role/search",
                "type": "post",
                "data": condJsonData,
            },
            "ordering": false,
            "columns": [
                {"data": "name"},
                {"data": "description"},
                {"data": "weight"},
                {"data": "remark"},
                {
                    "data": "id",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        var html = ""
                        html += '<a title = "编辑角色" class = "dataTableBtn btn btn-info" onclick="modifyRole(this)"  data-id=' + sData + '">编辑</a>'
                        html += ' <a title ="删除" class="btn btn-danger" onclick="del(this);" style="margin-left: 10px"  data-id="' + sData + '" >删除</a>'
                        $(nTd).html(html);
                    }
                }
            ]
        });

    }

    //删除-已完成
    function del(_this) {
        var id = $(_this).attr('data-id');
        layer.confirm("确认删除吗？", {skin: 'layui-layer-molv', title: '系统提示'}, function (layero, index) {
            $.ajax({
                url: ctx + "/admin/role/delete",
                type: 'post',
                dataType: 'json',
                data: {
                    id: id
                },
                success: function (data) {
                    $(".ui-button").removeAttr("disabled");
                    if (data.success) {
                        layer.msg("删除成功!");
                        loadData();
                    } else {
                        layer.msg(data.info);
                    }
                },
                error: function (data) {
                    $(".ui-button").removeAttr("disabled");
                    layer.msg(data.info);
                }
            });
        })
    }

    function goList() {
        location.href = ctx + '/admin/admin/go/list';
    }

    function myRefresh() {
        window.location.reload();
    }
</script>

</body>

</html>
